<template>
	<view>
		<view class="top">
			<view class="uni-form-item uni-column">
        <view class="title" style="position: relative;">充值数量
					<view style="position: absolute;top: 0;right: 20upx;" @click="cz_jilu">
						充值记录
					</view>
				</view> 
				<view class="yuan">¥</view>
          <input class="uni-input uni-input_top" type="number" placeholder="请输入充值金额" v-model="money"  />
      </view>
			<!-- <view class="top_two" >可充值数量<text class="top_right">{{credit}}</text></view> -->
		</view>
		<!-- <view style="font-size: 28upx;margin-left: 50upx;">
			当前充值手续费为{{withdrawcharge}}% 最低充值额度为{{withdrawmoney}}元。
		</view> -->
		<view class="foot">
			<view class="uni-form-item uni-column">
				<view class="get_way">充值方式</view>
			</view>
			<!-- <view class="getit"  @click="changePayType(1)">
				<image src="../../static/wx.png" mode="" class="img"></image>
				<text class="getit_card">微信</text>
				<label class="radio">
					<radio value="" color="#EB2E15" :checked='payType == 1' />
					</radio>
				</label>
			</view> -->
			<!-- <view :style="{ display: boolean_wx }">
				<view style="height: 40upx;line-height: 40upx;margin-left: 20upx;margin-top: 10upx;">微信收款码</view>
				
				<view v-if="wxskm" style="display: inline-block;width: 150upx;height: 150upx;border-radius: 10upx;border: 2upx solid #ccc;margin-left: 20upx;overflow: hidden;margin-top: 20upx;">
					<image :src="wxskm" mode="" style="width: 150upx;height: 150upx;" @click.stop.prevent="previewImage"></image>
				</view>
			</view> -->
			<view class="getit"  @click="changePayType(2)">
				<image src="../../static/zfb.png" mode="" class="img"></image>
				<text class="getit_card">支付宝</text>
				<label class="radio">
					<radio value="" color="#EB2E15" :checked='payType == 2' />
					</radio>
				</label>
			</view>
			<view :style="{ display: boolean_zfb }">
				<view style="height: 40upx;line-height: 40upx;margin-left: 20upx;margin-top: 10upx;">支付宝收款码</view>
				
				<view v-if="zfbskm" style="display: inline-block;width: 150upx;height: 150upx;border-radius: 10upx;border: 2upx solid #ccc;margin-left: 20upx;overflow: hidden;margin-top: 20upx;">
					<image :src="zfbskm" mode="" style="width: 150upx;height: 150upx;" @click.stop.prevent="previewImage1"></image>
				</view>
			</view>
			<view class="getit"  @click="changePayType(3)">
				<image src="../../static/yue_1.png" mode="" class="img"></image>
				<text class="getit_card">银行卡</text>
				<label class="radio">
					<radio value="" color="#EB2E15" :checked='payType == 3' />
					</radio>
				</label>
			</view>
			<view class="show" :style="{display:boolean}">
				<view class="same">
					<view class="name">收款姓名</view>
					<input class="uni-input uni-input_cell" type="text" disabled placeholder="请输入姓名" v-model="bank.bank_user"/>
				</view>
				<view class="same">
					<view class="name">收款银行名称</view>
					<input class="uni-input uni-input_cell" type="text" disabled placeholder="请输入银行" v-model="bank.bank" />
				</view>
				<view class="same">
					<view class="name">收款开户支行</view>
					<input class="uni-input uni-input_cell" type="text" disabled placeholder="请输入开户支行" v-model="bank.bank_branch" />
				</view>
				<view class="same">
					<view class="name">收款银行卡号</view>
					<input class="uni-input uni-input_cell" type="number" disabled placeholder="请输入银行卡号" v-model="bank.bank_id" />
				</view>
				<!-- <view class="same">
					<view class="name">确认卡号</view>
					<input class="uni-input uni-input_cell" type="number" placeholder="请确认卡号" v-model="bankcard1" />
				</view> -->
				
				<!-- <view class="list webkit same">
					<view class="label">所在地区</view>
					<button class="" type="" @click="showMulLinkageThreePicker" style="background: #fff;outline:none;line-height: 55upx;">{{accountarea}}</button>
				</view> -->
				
			</view>
			<view style="background: #F5F5F5;margin: 30upx 0;padding-top: 30upx;">
				<view style="background: #fff;">
					<view style="color: #777777;margin-left: 30upx;height: 50upx;line-height: 50upx;">
						交易凭证
					</view>
					<view style="display: inline-block;width: 90%;height: 350upx;border-radius: 10upx;border: 2upx solid #ccc;margin-left: 5%;overflow: hidden;margin-top: 20upx;text-align: center;font-size: 45upx;line-height: 350upx;" @click.stop.prevent="chooseImage" v-if="!res.wechat">
						点击上传交易凭证
					</view>
					<view v-if="imagess[0]" style="display: inline-block;width: 90%;height: 350upx;border-radius: 10upx;border: 2upx solid #ccc;margin-left: 5%;overflow: hidden;margin-top: 20upx;">
						<image :src="imagess[0]" @click.stop.prevent="chooseImage" mode="" style="width: 100%;height: 100%;"></image>
					</view>
				</view>
			</view>
			<button class="next" style="background-color: #EB2E15;" @click="ljcz">立即充值</button>
		</view>
		
		
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bank:{},
				res:{},
				openid:'',
				money:'',
				active:"active",
				checked:'checked',
				boolean: 'none',
				boolean_wx: 'none',
				boolean_zfb: 'none',
				bankout: 'none',
				arrs:[],
				realname:'',
				bankname:'',
				bankbranch:'',
				bankbranch2:'',
				bankbranch3:'',
				bankcard:'',
				bankcard1:'',
				credit:'',
				multiple:'',
				withdrawcharge:'',
				withdrawmoney:'',
				// 地址
				accountarea:'-请选择地区-',
				cityPickerValueDefault: [0, 0, 0],
				pickerValueDefault: [0],
				pickerValueArray:[],
				// mulLinkageTwoPicker: cityData,
				// province:province,
				// city:city,
				// area:area,
				// asd:asd,
				themeColor: '#007AFF',
				pickerText: '',
				mode:'',
				deepLength:1,
				datavalue:'',
				payType: '', // 支付类型
				imagess: [], // 数组类型图片 wx
				imgurl:'', // 字符串类型图片 wx
				imagesss: [], // 数组类型图片 zfb
				imgurls:'', // 字符串类型图片 zfb
				wxskm:'',
				zfbskm:'',
				type:'',
			};
		},
		onLoad:function(){
			uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
		},
		methods:{
			setAjax(){
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=order.luckdraw.pay_info&app=1',
					method: 'POST',
					data: {'openid':this.openid},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						this.res = res.data
						// console.log(this.res)
						this.bank = res.data.bank
						this.wxskm = res.data.wechat_collection
						this.zfbskm = res.data.alipay_collection
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			chooseImage(){
				var _this = this
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
							let file = res.tempFilePaths
							var images = []
							var img = ''
							for(var i = 0; i<res.tempFilePaths.length; i++) {
								uni.uploadFile({
									url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
									//仅为示例，非真实的接口地址
									filePath: file[i],
									name: 'file',
									formData: {
										'user': 'test'
									},
									success: (res) => {
										_this.res.wechat = true
										// console.log(res)
										images.push(JSON.parse(res.data).url)
										_this.imagess = images
										// _this.avatar = _this.imagess[0]
										
										img = img + JSON.parse(res.data).url + ';'
										_this.imgurl = img
									}
								});
							}
				    }
				});
			},
			select_img(){
				var _this = this
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
							let file = res.tempFilePaths
							var images = []
							var img = ''
							for(var i = 0; i<res.tempFilePaths.length; i++) {
								uni.uploadFile({
									url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
									//仅为示例，非真实的接口地址
									filePath: file[i],
									name: 'file',
									formData: {
										'user': 'test'
									},
									success: (res) => {
										_this.res.alipay = true
										// console.log(res)
										images.push(JSON.parse(res.data).url)
										_this.imagesss = images
										// _this.avatar = _this.imagess[0]
										
										img = img + JSON.parse(res.data).url + ';'
										_this.imgurls = img
									}
								});
							}
				    }
				});
			},
			previewImage(){
				console.log(this.wxskm) // http://192.168.100.251:8970/6_1597822634094.png
				        var images = [];
				        images.push(this.wxskm);
				        console.log(images)  // ["http://192.168.100.251:8970/6_1597822634094.png"]
				        uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://192.168.100.251:8970/6_1597822634094.png"]
				            current:0,
				            urls:images,
				            longPressActions: {  //长按保存图片到相册
				                itemList: ['保存图片'],
				                success: (data)=> {
				                    console.log(data);
				                    uni.saveImageToPhotosAlbum({ //保存图片到相册
				                        filePath: payUrl,
				                        success: function () {
				                            uni.showToast({icon:'success',title:'保存成功'})
				                        },
				                        fail: (err) => {
				                            uni.showToast({icon:'none',title:'保存失败，请重新尝试'})
				                        }
				                    });
				                },
				                fail: (err)=> {
				                    console.log(err.errMsg);
				                }
				        }
				        });
			},
			previewImage1(){
				console.log(this.zfbskm) // http://192.168.100.251:8970/6_1597822634094.png
				        var images = [];
				        images.push(this.zfbskm);
				        console.log(images)  // ["http://192.168.100.251:8970/6_1597822634094.png"]
				        uni.previewImage({ // 预览图片  图片路径必须是一个数组 => ["http://192.168.100.251:8970/6_1597822634094.png"]
				            current:0,
				            urls:images,
				            longPressActions: {  //长按保存图片到相册
				                itemList: ['保存图片'],
				                success: (data)=> {
				                    console.log(data);
				                    uni.saveImageToPhotosAlbum({ //保存图片到相册
				                        filePath: payUrl,
				                        success: function () {
				                            uni.showToast({icon:'success',title:'保存成功'})
				                        },
				                        fail: (err) => {
				                            uni.showToast({icon:'none',title:'保存失败，请重新尝试'})
				                        }
				                    });
				                },
				                fail: (err)=> {
				                    console.log(err.errMsg);
				                }
				        }
				        });
			},
			//选择支付方式
			changePayType(type) {
				// console.log(type)
				this.payType = type;
				if (type == 1) { // 微信
					this.boolean_wx = 'block'
					this.boolean_zfb = 'none'
					this.boolean = 'none'
					this.type = 'wechat'
				}
				if (type == 2) { // 支付宝
					this.boolean_zfb = 'block'
					this.boolean_wx = 'none'
					this.boolean = 'none'
					this.type = 'alipay'
				}
				if (type == 3) {
					this.boolean = 'block'
					this.boolean_wx = 'none'
					this.boolean_zfb = 'none'
					this.type = 'bank'
				}
			},
			onCancel(e) {
			},
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				this.accountarea = e.label
				console.log(this.accountarea)
				// var pro = e.value[0]
				// var city = e.value[1]
				// var area = e.cityCode
				// this.submit.datavalue = this.province[pro].value + '0000 ' + this.city[pro][city].value + '00 ' +area
				// var a = e.label.split("-")
				// a = a[0] + ' ' + a[1] + ' ' + a[2]
				// this.submit.areas = a
			},
			// onBackPress() {
			//   if (this.$refs.mpvuePicker.showPicker) {
			// 	this.$refs.mpvuePicker.pickerCancel();
			// 	return true;
			//   }
			//   if (this.$refs.mpvueCityPicker.showPicker) {
			// 	this.$refs.mpvueCityPicker.pickerCancel();
			// 	return true;
			//   }
			// },
			// onUnload() {
			// 	if (this.$refs.mpvuePicker.showPicker) {
			// 		this.$refs.mpvuePicker.pickerCancel()
			// 	}
			// 	if (this.$refs.mpvueCityPicker.showPicker) {
			// 		this.$refs.mpvueCityPicker.pickerCancel()
			// 	}
			// },
			check() {
				this.boolean = this.boolean == 'block' ? 'none': 'block'
			},
			bank_out() {
				this.bankout = 'block'
			},
			bank_miss(index) {
				this.bankname = this.arrs[index]
				this.bankout = 'none'
			},
			cz_jilu() {
				uni.navigateTo({
					url: '/pages/czjl/czjl'
				})
			},
			jumpto () {
				if (this.payType == 1 ) {
					this.wx_tx()
				}
				if (this.payType == 2 ) {
					this.zfb_tx()
				}
				if (this.payType == 3 ) {
					this.jump()
				}
			},
			ljcz() {
				var data = { 
				'openid':this.openid,
				'money':this.money,
				'type':this.type,
				'pic_url':this.imagess[0]
				}
				console.log(data)
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=order.luckdraw.recharge&app=1',
					method: 'POST',
					data: data,
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
							console.log(res)
							uni.showModal({
							title:'提示',
							content: res.data.message,
							showCancel: false,
							success() {
								if(res.data.error==0){
									setTimeout(()=>{
										uni.navigateTo({
											url: './czjl/czjl'
										})
									},1000)
								}
							}
							})
							
					},
					fail: () => {},
					complete: () => {}
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.pay-type-list {
		margin-top: 20upx;
		background-color: #fff;
		padding-left: 60upx;
		
		.type-item{
			height: 120upx;
			padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position:relative;
		}
		
		.icon{
			width: 100upx;
			font-size: 52upx;
		}
		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}
		.icon-weixinzhifu {
			color: #36cb59;
		}
		.icon-alipay {
			color: #01aaef;
		}
		.tit{
			font-size: 24upx;
			color: #000;
			margin-bottom: 4upx;
		}
		.con{
			flex: 1;
			display: flex; 
			flex-direction: column;
			font-size: 24upx;
			color: #000;
		}
	}
	
	
button::after{
	border:none;
}
.top {
	margin-top: 30upx;
	background-color: #fff;
	padding: 0 20upx;
}
.uni-form-item {
	position: relative;
}
.uni-input_top {
	margin-left: 50upx;
	height: 100upx;
	line-height: 100upx;
	font-size: 40upx;
	// border-bottom: 1upx solid #eee;
}
.yuan {
	position: absolute;
	top: 100upx;
	font-size: 44upx;
	font-weight: 555;
	left: 20upx;
}
.top_two {
	height: 80upx;
	line-height: 80upx;
	margin-left: 20upx;
	color: #555;
}
.top_right {
	margin-left: 50upx;
}
.foot {
	background-color: #FFFFFF;
	margin-top: 30upx;
}
.get_way {
	margin-left: 30upx;
	border-bottom: 2upx solid #eee;
}
.img {
	width: 50upx;
	height: 50upx;
	margin-left: 30upx;
	margin-top: 30upx;
}
.getit {
	position: relative;
	height: 100upx;
	border-bottom: 2upx solid #eee;
}
.getit_card {
	position: absolute;
	top: 30upx;
	left: 100upx;
}
.radio {
	position: absolute;
	top: 30upx;
	right: 25upx;
}
.show {
	background-color: #fff;
}
.same {
	height: 80upx;
	display: flex;
	margin: 20upx;
	padding-bottom: 20upx;
	border-bottom: 1upx solid #eee;
}
.name {
	flex: 1.5;
	padding-top: 16upx;
}
.uni-input_cell {
	flex: 3;
}
.bank {
	flex: 3;
	position: relative;
}
.bank_online {
	position: absolute;
	left: 10upx;
	top: 16upx;
}
.out_miss_father {
	position: absolute;
	top: 58upx;
	left: 10upx;
	z-index: 99999;
	width: 400upx;
	border: 1upx solid #ccc;
	background-color: #fff;
}
.next {
	margin: 20upx;
	border-radius: 15upx;
	background-color: #FF5555;
	color: #fff;
}
.list {
	height: 60upx;
	line-height: 60upx;
}
</style>
